// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';


class ChildCounter extends React.Component {
  constructor(props) {
    super(props);
    console.log('ChildCounter 1.constructor');
  }

  componentWillReceiveProps() {
    // 更新才执行，初次渲染不会执行
    console.log('ChildCounter componentWillReceiveProps');
  }
  componentWillMount() {
    console.log('ChildCounter 2.componentWillMount');
  }
  componentDidMount() {
    console.log('ChildCounter 4.componentDidMount');
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('ChildCounter 5.shouldComponentUpdate');
    return nextProps.count % 3 === 0;
  }
  componentWillUpdate() {
    console.log('ChildCounter 6.componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('ChildCounter 7.componentDidUpdate');
  }
  componentWillUnmount() {
    console.log('ChildCounter 8.componentWillUnmount');
  }

  render() {
    console.log('ChildCounter 3.render');
    return (
      <div>
        <p>{this.props.count}</p>
      </div>
    )
  }
}
class Counter extends React.Component {

  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('Counter 1.constructor');
  }
  componentWillMount() {
    console.log('Counter 2.componentWillMount');
  }
  componentDidMount() {
    console.log('Counter 4.componentDidMount');
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Counter 5.shouldComponentUpdate');
    // 奇数不更新，偶数更新 其实不管此方法返回true还是false, this.state其实都会改变 ，如果返回true的话页面会刷新
    return nextState.count % 2 === 0;
  }
  componentWillUpdate() {
    console.log('Counter 6.componentWillUpdate');
  }
  componentDidUpdate() {
    console.log('Counter 7.componentDidUpdate');
  }
  render() {
    console.log('Counter 3.render');
    return (
      <div>
        <p>{this.state.count}</p>
        {this.state.count === 4 ? null : <ChildCounter count={this.state.count} />}
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}


ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",


/**
基本的生命周期
Counter 1.constructor
Counter 2.componentWillMount
Counter 3.render
Counter 4.componentDidMount

更新
Counter 5.shouldComponentUpdate // 这里可以阻止是否继续执行再次渲染页面，false 不继续，true 继续
Counter 6.componentWillUpdate
Counter 3.render
Counter 7.componentDidUpdate

constructor-componentWillMount-render-componentDidMount-shouldComponentUpdate-componentWillUpdate-componentDidUpdate
 */


/**
有子组件的生命周期
Counter 1.constructor
Counter 2.componentWillMount
Counter 3.render
ChildCounter 1.constructor
ChildCounter 2.componentWillMount
ChildCounter 3.render
ChildCounter 4.componentDidMount
Counter 4.componentDidMount

更新
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter componentWillReceiveProps // 将要接收 props
ChildCounter 5.shouldComponentUpdate
Counter 7.componentDidUpdate


销毁
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 8.componentWillUnmount // 销毁
Counter 7.componentDidUpdate

子组件从销毁到渲染啊
Counter 5.shouldComponentUpdate
Counter 6.componentWillUpdate
Counter 3.render
ChildCounter 1.constructor 
ChildCounter 2.componentWillMount
ChildCounter 3.render
ChildCounter 4.componentDidMount
Counter 7.componentDidUpdate
 */